The A11y Cats: Adventures in the Digital School
<br>
<img src="Intro Image_framed.jpg" alt="A vibrant classroom with students using tablets, neon icons, and digital books glowing." style="max-width: 100%; height: auto;">
<br>
Introduction: Why Accessibility Matters for Everyone
<br>
Imagine playing a game, but each time you go to the next level, the screen gets blurrier, or trying to watch a funny video, but the sound is so quiet you miss the best parts. Pretty annoying, right? That’s what some people deal with every day online—it’s like a game that’s harder to play or a video that’s tough to enjoy, just because of how it’s set up!
Now, think about this: What if every game, every website, and every piece of technology was easy to use for everyone —no matter how old they are, what tools they need, or how they see or hear the world?
That’s what Accessibility is all about!
The word has 11 letters between the "A" and the "y," so we say A-eleven-y or A-one-one-y, it’s also pronounced Ally.
<br>
<img src="A11y_Explanation_framed.jpg" alt="The word 'ACCESSIBILITY' is shortened to 'A11Y,' showing 11 letters replaced with the number 11." style="max-width: 100%; height: auto;">
<br>
A11y means making sure that everyone, whether they’re 7 or 70, can enjoy using technology without feeling left out. It’s about making the web, games, and even apps easy to understand, easy to navigate, and easy to enjoy for all kinds of people.
Maybe you’ve never had trouble reading a website or clicking on a link, but there are lots of people who do. Some people have a harder time seeing, hearing, or using their hands. Some might need extra help understanding where to go or what to do next. And guess what? That’s perfectly normal! We all need different things to succeed, just like how some of us are better at math while others love to draw.
That’s why we have the A11y Cats! Their job is to make sure that websites and technology are designed for everyone, no matter what. They’re on a mission to make sure the digital world is fair, fun, and accessible for all.
<br>
<img src="GroupImage2x2_framed.jpg" alt="2x2 grid of cartoon cats: Perci, Una (top row), Una, and Raffi (bottom row) with glowing backdrops." style="max-width: 100%; height: auto;">
<br>
As you read their story, you’ll see how they help fix problems that might seem small, but actually make a huge difference for people of all ages and abilities. You might even start to notice some of these things on websites you use every day! And who knows—you could help spot a problem that needs fixing, just like the A11y Cats.
So, are you ready to join them on their mission?
Let’s jump into the world of accessibility and see how it makes life better for everyone, everywhere.
[[Meet the A11y Cats]]
(set: $captionsComplete to false)
(set: $altTextComplete to false)
(set: $keyboardComplete to false)
(set: $contrastComplete to false)
(set: $formsComplete to false)
(set: $clickHere to false)
(set: $clickThis to false)
(set: $clickMe to false)Chapter 1: The Missing Captions Mystery
<br>
<img src="Missing Captions Mystery.jpg" alt="The A11y Cats in a Media Center, watching floating video bubbles, chase the Caption Snatcher stealing words." style="max-width: 100%; height: auto;">
<br>
The A11y Cats land in the Media Center, where videos float like colorful bubbles in the air. Kids eagerly try to watch them, but some can’t seem to follow along.
<br>
Ollie spots a bubble with a video of a science lesson. "Why are some of the kids confused?" they wonder. Perci floats up to inspect the video. "No captions! The words just drift away, leaving some kids out."
They notice that students who are Deaf or watching in noisy places can't keep up.
Intrigue Moment: A shadowy figure (the Caption Snatcher) is seen creeping away with stolen words.
Choice Time: What should the A11y Cats do?
[[Chase the Caption Snatcher to get the original words back]]
[[Use a quick-fix tool to Add Words Back to the Videos]]
[[Create their own captions for each video]]
By chasing the Caption Snatcher, you may be relying on one fix and that isn’t enough; accurate captions are essential for everyone to understand.
<br>
<img src="A11y_Cats_Chasing_Caption_Snatcher_framed.jpg" alt="The A11y Cats and kids chase the Caption Snatcher in a glowing, bubble-filled Media Center." style="max-width: 100%; height: auto;">
<br>
Give it another go!
[[Use a quick-fix tool to Add Words Back to the Videos]]
[[Create their own captions for each video]] Well done! That was a smart decision!
The A11y Cats gather around the video and listen carefully to the science lesson. They start typing each word, making sure every important detail is included in the captions. It takes time, but soon, the words match perfectly with what’s being said in the video.
“Now, everyone can follow along,” says Perci, watching as the kids smile and understand the lesson. Ollie nods in agreement. With the accurate captions, the science lesson is clear for those who are hard of hearing or prefer reading, and every student can enjoy the video together as the bubbles become vibrant and accessible.
<br>
<img src="Accurate_Captions_Science_lesson_framed.jpg" alt="The A11y Cats type captions for a glowing video bubble, kids smile as the science lesson is clear." style="max-width: 100%; height: auto;">
<br>
[[Chapter 2: The Alt Text Adventures]]
Chapter 2: Alt Text Adventures
<br>
<img src="virtual_art_gallery_words_floating_framed.jpg" alt="Virtual art gallery with glowing words floating away and one selected artwork as a blank canvas." style="max-width: 100%; height: auto;">
<br>
Next, the A11y Cats venture into the Virtual Art Gallery, where beautiful paintings dance like holograms. But Una notices that some kids can only see empty frames. They reach out, but there’s nothing to describe the images.
"It’s like they’re looking through invisible art!" Una exclaims. Perci purrs thoughtfully, “Looks like we need to add alt text so everyone can experience these artworks, even if they can’t see them.”
Intrigue Moment: As the A11y Cats explore the gallery, they hear soft whispers coming from the empty frames. The whispers hint at the missing alt text: “...sunflowers...” or “...a winding river...” but the words fade before they’re fully heard.
Choice Time: What should the A11y Cats do?
[[Add detailed descriptions themselves]]
[[Ignore adding descriptions since it's easier and faster]]
[[Use a basic template to generate descriptions for the images]]
“Great choice! You’re on the right track!” Perci cheers.
The A11y Cats gather the kids around and explain why adding good descriptions, called alt text, is so important. “Imagine if you couldn’t see the pictures,” Una says. “Without descriptions, how would you know what’s there?”
Perci purrs, “By adding detailed descriptions, we make sure everyone can enjoy the art—even if they’re using a screen reader or can’t see the images. It’s like painting a picture with words!”
The kids nod, excited to help. “And guess what?” adds Una. “These descriptions don’t just help people—they also make it easier for others to find the gallery online!”
With the mystery solved, the A11y Cats show the kids how to write great alt text. Together, they describe each frame in the gallery, making the art come alive for everyone.
<br>
<img src="Add_detailed_descriptions.jpg" alt="Kids learning about A11y with glowing paintings, guided by a cat and teacher in a bright gallery." style="max-width: 100%; height: auto;">
<br>
[[Chapter 3: The Keyboard Navigation Quest]]<br>
<img src="virtual_art_gallery_kids_still_confused_framed.jpg" alt="Virtual art gallery with blank canvases, puzzled kids, and A11y Cats ready to explain solutions." style="max-width: 100%; height: auto;">
<br>
The kids still can’t figure out what the pictures are, and it makes them feel confused and upset.
The A11y Cats step in to explain why adding descriptions is important. “See?” they say. “A little extra work can help everyone enjoy the art!”
“Let’s try again!” they cheer.
[[Use a basic template to generate descriptions for the images]]
[[Add detailed descriptions themselves]]
Chapter 3: The Keyboard Navigation Quest
<br>
<img src="game_zone_keyboard_navigation_framed.jpg" alt="Game Zone with glowing doors, puzzled kids, Raffi spinning at a keyboard, and Ollie observing." style="max-width: 100%; height: auto;">
<br>
The A11y Cats step into the Game Zone, a dazzling room filled with digital games and glowing lights. Excited kids are playing, but a group of players is stuck at the entrance.
“It’s like the doors won’t let them in!” Ollie says, tilting her head at the glowing doors that keep closing before anyone can enter.
Raffi decides to try it out. He presses the arrow keys, but instead of getting through, he spins in circles! “These controls are making me dizzy!” he groans, stumbling back with a shake of his head. “They don’t work for players using keyboards!”
As they brainstorm what to do, the Cats overhear faint whispers from the arcade speakers. “There’s a hidden path... for keyboard players...” the whispers say, fading away.
“A secret path?” Ollie exclaims. “Let’s find it and fix this so everyone can play!”
Choice Time: What should the A11y Cats do?
[[Tweak the game’s code for easy access]]
[[Find the hidden entrance]]
[[Leave things as they are]]
<br>
<img src="GameZoneHiddenEntrance_framed.jpg" alt="Game Zone with A11y Cats and kids solving a keypad riddle to find a hidden accessible entrance." style="max-width: 100%; height: auto;">
<br>
The A11y Cats huddle together, their whiskers twitching with determination. “There’s got to be another way in!” Ollie says, her tail swishing.
They spot faint glowing arrows on the floor leading to a keypad hidden behind a glowing panel. “This might be a secret entrance!” says Raffi, inspecting the keypad closely.
The kids and A11y Cats work together, solving a riddle to unlock the hidden door. It slides open with a soft whoosh, revealing a path that works perfectly with keyboards. The kids cheer as they rush inside, finally able to join the fun.
But Una tilts his head thoughtfully. “Why was this hidden in the first place?” he asks. “Everyone should be able to find their way in, no matter what they’re using to play.”
“You’re right,” Ollie agrees. “Access shouldn’t be a secret. Let’s fix this so no one has to solve a puzzle just to join the fun!”
[[Tweak the game’s code for easy access]]
[[Leave things as they are]] <br>
<img src="GameZoneTriumph_framed.jpg" alt="Kids and A11y Cats celebrate fixing the game, with open doors and everyone playing together." style="max-width: 100%; height: auto;">
<br>
“Great choice! This is the smartest move yet!” Ollie says, her tail flicking excitedly.
“We can tweak the game’s code to make sure it’s easy for everyone to play right from the start!” Raffi explains. “That way, kids who use keyboards don’t have to find a secret entrance or feel left out.”
The A11y Cats and kids work together, typing furiously at the glowing game console. As they fix the code, the Game Zone lights up brighter than ever.
When the update is complete, the main doors slide open smoothly, and kids with keyboards cheer as they join the fun.
“This is how it should be,” Perci purrs. “Everyone deserves a way to play together.”
[[Chapter 4: The Color Contrast Conundrum]]
Chapter 4: The Color Contrast Conundrum
<br>
<img src="A_vibrant_school_library_scene_with_wooden_shelves_framed.jpg" alt="A school library with kids, A11y Cats, and a glowing paintbrush creating poor text contrasts." style="max-width: 100%; height: auto;">
<br>
The A11y Cats padded into the school library, their whiskers twitching with curiosity. Shelves packed with books stretched toward the ceiling, colorful bean bags dotted the floor, and sunlight spilled through tall windows, creating a warm, inviting glow. Students bustled about, flipping pages and scanning screens. But not everyone was smiling.
A group of kids gathered around the “Book Recommendations” board, squinting and whispering to each other. Some leaned in close, others scratched their heads, trying to make sense of the words on the page.
“What’s going on?” Perci asked, her tail swishing as she approached the board. She squinted at the list of books. “These colors are so close, I might as well be reading with my eyes closed!” She threw her paws up in frustration.
Before anyone could reply, a whirling flash of light zipped through the air. The students gasped, and the A11y Cats’ ears perked up.
“What is that?” Una said, his green eyes wide.
The glowing paintbrush spiraled through the library, leaving streaks of shimmering, random colors in its wake. Words on the board turned neon pink, faded yellow, or disappeared completely into the background. Posters, screens, and even book covers weren’t safe. Chaos erupted as students tried to decipher the jumbled rainbow of letters.
“This is a disaster!” Raffi exclaimed. “Nobody can read anything!”
“Let’s catch that paintbrush before it makes things worse!” Ollie declared, leaping into action.
But catching a magical, zippy paintbrush was easier said than done. The A11y Cats needed to figure out how to restore order—and fast. But how?
Choice Time: What should the A11y Cats do?
[[Use the brush to randomly brighten the text colors]]
[[Adjust the background color to ensure strong contrast with the text]]
[[Leave the colors as they are]]
<br>
<img src="A_lively_school_library_scene_paintbrush_framed.jpg" alt="A chaotic library scene with a glowing paintbrush creating unreadable neon text on a bulletin board." style="max-width: 100%; height: auto;">
<br>
The A11y Cats watch as the glowing paintbrush zips back and forth, splashing random bright colors across the library walls, screens, and even the “Book Recommendations” board.
“Maybe if we just brighten the colors, everything will be easier to read!” Ollie suggests, leaping after the paintbrush.
The brush slows down, hovering over the board, and swirls a trail of neon pink, electric green, and blinding yellow over the text. At first, the words seem clearer, and a few students cheer.
But then…
“Hey, I still can’t read this!” one student complains, pointing to glowing yellow letters on a white background.
“Now it’s too bright—it’s like staring at the sun!” another groans, shielding their eyes.
Perci winces. “Yikes. Some kids can read better, but others are still having a hard time. Randomly picking colors isn’t fixing the problem for everyone!”
Una nods. “We need to think about colors that work together, not just ones that look flashy.”
“That’s not quite it,” Raffi says gently. “Let’s try something else.”
[[Adjust the background color to ensure strong contrast with the text]]
[[Leave the colors as they are]]
<br>
<img src="A_cozy_school_library_scene_good_contrast_framed.jpg" alt="Perci adjusts a library board with crisp text: white on blue, black on yellow; students react." style="max-width: 100%; height: auto;">
<br>
“Yes! That’s a purr-fect choice!” Perci cheers, her whiskers fluttering with excitement. With a flick of the magical paintbrush, she adjusts the background colors behind the text on the “Book Recommendations” board.
Suddenly, the words on the board pop like fireworks in the night sky. Bright white text appears on deep blue, soft yellow words shine on bold black, and every combination is clear and easy to read. The students gasp in amazement.
“This is so much better!” one student says, pointing to the board. “I can read it all without squinting!”
Ollie nods. “When the background and text colors work together, it’s like a perfect team—they make sure everyone can see what’s important.”
Una adds, “It’s not just about making things look nice. Strong contrast helps everyone, especially people who have trouble seeing certain colors or reading small text.”
The library feels lighter and brighter. Students eagerly gather around the board, choosing books and chatting about their favorite stories. Even Ms. Hally, the principal, smiles as she watches the change.
“This is what thoughtful design looks like,” Perci says proudly, setting the brush down. “When we make things easier for everyone, we make the world a friendlier place!”
The students cheer, and the A11y Cats exchange high-fives (or high-paws). The library truly becomes a space where everyone feels welcome.
[[Chapter 5: The Forms and Fields Fiasco]]Chapter 5: The Forms and Fields Fiasco
<br>
<img src="Digital_classroom_forms fiasco_framed.jpg" alt="A glitchy ghost scrambles form labels in a digital classroom as the A11y Cats leap into action." style="max-width: 100%; height: auto;">
<br>
The A11y Cats stroll into the Digital Classroom, a vibrant world of glowing screens and colorful keyboards. Students sit at their desks, trying to fill out forms and quizzes on their tablets. But something’s wrong.
“Why is everyone just... staring?” Ollie asks, tilting her head.
One student sighs loudly. “I don’t know what to type! These boxes don’t say anything!”
Una squints at the nearest screen, his tail wiggling. “Blank boxes with no labels? How are they supposed to know what goes where?”
“It’s like solving a mystery without any clues!” he exclaims, throwing his paws up dramatically.
The A11y Cats investigate, but before they can fix the problem, a strange glow fills the room. Out of the nearest tablet pops a glitchy, mischievous ghost, its form shaking and crackling with static.
“Who dares disturb my forms?” the ghost cackles, swirling around and scrambling what few labels the forms had left. Text turns to gibberish, and the blank boxes now flash confusing symbols.
“Great,” Perci groans. “A ghost that scrambles labels? How are we supposed to fix this?”
“We’ll find a way,” Una says confidently, stepping forward. “No ghost is going to stop us from making forms easier for everyone!”
The A11y Cats leap into action, determined to outsmart the glitchy ghost and bring order to the classroom.
Choice Time: What should the A11y Cats do?
[[Add placeholder text inside the fields to hint at what goes where]]
[[Carefully match each label to the correct field, ensuring clarity for every form entry]]
[[Ignore the ghost and leave the labels as they are]]
<br>
<img src="Digital_classroom_proper_labels_framed.jpg" alt="Una celebrates as labeled forms help students, while a curious ghost perches on a tablet nearby." style="max-width: 100%; height: auto;">
<br>
“Yes! That’s the purr-fect solution!” Una cheers, waving with a flourish.
The A11y Cats work together, carefully assigning labels to each blank box. “Name” goes here, “Date” goes there, and “Your Favorite Book” gets its own special spot. The forms come to life, clear and easy to understand.
One by one, the students start filling out the forms. Smiles spread across the room as every kid knows exactly what to type.
“This is awesome!” a student exclaims. “I don’t even have to guess anymore!”
Even the mischievous ghost, now perched on a tablet, watches curiously. “Huh,” it says with a crackly voice. “So, being clear really does help everyone.”
Una grins. “See? It’s not about being fast—it’s about getting it right. When we take the time to make things clear, everyone can join in the fun!”
The A11y Cats celebrate as the forms become fully accessible. The digital classroom feels brighter and more welcoming than ever.
[[Chapter 6: The Grand Web Rescue]]
Chapter 6: The Grand Web Rescue
<br>
<img src="Digital_school_plaze_framed.jpg" alt="A glowing Accessibility Gateway in a digital plaza with A11y Cats ready for their final challenge." style="max-width: 100%; height: auto;">
<br>
The Digital School Plaza buzzed with energy as the A11y Cats gathered in the center. The entire school website seemed to shimmer and pulse, alive with activity. Above the plaza, Ms. Hally’s voice echoed like a school bell.
“A11y Cats, a new challenge awaits you! A part of the website that’s never been explored is opening up, but it’s full of tricky puzzles. To unlock it, we’ll need everything you’ve taught us so far.”
Perci’s whiskers jiggled with excitement. “One last adventure? Let’s do this!”
Suddenly, the ground shook, and a giant glowing Accessibility Gateway appeared in the middle of the plaza. The towering door sparkled with mysterious, glowing symbols—captions, color contrast, keyboard controls, and more. The symbols shifted and danced across its surface, almost as if the door was alive.
“It’s not just a door,” Una said, his tail swishing thoughtfully. “It’s a reminder of everything we’ve learned about accessibility—and what happens when things don’t work together.”
Perci padded closer, squinting at the glowing shapes. “Why is it locked? We’ve faced all these challenges before.”
Una’s eyes lit up. “I think it wants us to show that we understand how everything connects. Accessibility isn’t just about solving one problem at a time—it’s about how all the pieces fit together to make the whole experience work for everyone.”
As the A11y Cats pondered, the symbols on the gateway suddenly shot off like fireflies, scattering across the plaza and into the website’s glowing landscape. Each symbol left behind a vague label, but without clear descriptions, their meanings were hard to figure out.
“It’s like a giant scavenger hunt!” Ollie said, her eyes gleaming.
“But with tricky puzzles,” Raffi added, frowning slightly.
“We’ll have to split up and solve each one using what we've learned,” Una said confidently. “Time to show what the A11y Cats are made of!”
[[The Final Challenges]]
(set: $captionsComplete to false)
(set: $altTextComplete to false)
(set: $keyboardComplete to false)
(set: $contrastComplete to false)
(set: $formsComplete to false)
(set: $clickHere to false)
(set: $clickThis to false)
(set: $clickMe to false)Prologue: A Call for Help! from Ms. Hally
<br>
<img src="MsHally_Maplewood_framed.jpg" alt="Ms. Hally with a glowing tablet surrounded by young children in front of Maplewood Elementary School." style="max-width: 100%; height: auto;">
<br>
The A11y Cats—Perci, Ollie, Una, and Raffi—receive an urgent message from Ms. Hally, their former kindergarten teacher who is now the principal of Maplewood Elementary. The students are struggling to use their school website for homework, games, and announcements.
<br>
"Something is keeping many kids from using the site," Ms. Hally says, her voice crackling through the digital airwaves. "I need your help to make it right. Can you solve the mysteries within the digital world of our school website?"
<br>
With a flick of their tails and a zap of energy, the A11y Cats dive through the portal into the digital school, ready to solve the mysteries ahead.
<br>
<img src="Help - CartoonImages.jpg" alt="Four superhero cats leap through a glowing portal, surrounded by icons for homework, games, and books." style="max-width: 100%; height: auto;">
[[Chapter 1: The Missing Captions Mystery]]
The Final Challenges
<br>
<img src="Final_challenges_framed.jpg" alt="A glowing Accessibility Gateway with labeled symbols: Keyboard, Captions, Alt, Forms, and Contrast." style="max-width: 100%; height: auto;">
<br>
At the center of the plaza, the towering Accessibility Gateway pulsed with energy, waiting to be unlocked.
Perci’s whiskers fluttered as she stared at the symbols. “These doors aren’t just challenges—they’re reminders of everything we’ve learned.”
Una nodded thoughtfully. “But look how they’re scattered. We’ll need to tackle each one, not just for one type of user, but for everyone.”
“Then let’s do it,” Ollie said, her tail flicking with excitement.
(if: not $captionsComplete)
[Perci and Ollie bounded toward the glowing [[Captions]] door, tails swishing with excitement.]
(else:)
[
(text-colour: "yellow")
[Perci and Ollie bounded toward the glowing [[Captions]] door, tails swishing with excitement.
]
]
(if: not $formsComplete)
[Una and Raffi approached the [[Forms]] door, inspecting its glowing frame. “Forms need to be easy to fill out, no matter how someone interacts with them,” Una said, adjusting his glasses. Raffi nodded, already brainstorming fixes. “Let’s make sure no one gets stuck!”]
(else:)
[
(text-colour: "yellow")
[Una and Raffi approached the [[Forms]] door, inspecting its glowing frame. “Forms need to be easy to fill out, no matter how someone interacts with them,” Una said, adjusting his glasses. Raffi nodded, already brainstorming fixes. “Let’s make sure no one gets stuck!”]
]
(if: not $keyboardComplete)
[After finishing their tasks, Ollie joined Raffi to tackle the [[Keyboard]] door. They worked together, ensuring that every path through the site could be accessed smoothly without a mouse. ]
(else:)
[
(text-colour: "yellow")
[After finishing their tasks, Ollie joined Raffi to tackle the [[Keyboard]] door. They worked together, ensuring that every path through the site could be accessed smoothly without a mouse. ]
]
(if: not $altTextComplete)
[Meanwhile, Perci united with Una at the [[Alt Text]] door. “Every picture needs a story,” Perci said. “No one should miss out because they can’t see it.”]
(else:)
[
(text-colour: "yellow")
[Meanwhile, Perci united with Una at the [[Alt Text]] door. “Every picture needs a story,” Perci said. “No one should miss out because they can’t see it.”]
]
(if: not $contrastComplete)
[One by one, the A11y Cats returned to the center, their efforts lighting up each part of the plaza. The [[Contrast]] door began to glow brighter. “This one needs all of us,” Una said. The team gathered around the final challenge, ensuring that text and backgrounds worked together perfectly.]
(else:)
[
(text-colour: "yellow")
[One by one, the A11y Cats returned to the center, their efforts lighting up each part of the plaza. The [[Contrast]] door began to glow brighter. “This one needs all of us,” Una said. The team gathered around the final challenge, ensuring that text and backgrounds worked together perfectly.]
]
(if: $captionsComplete and $altTextComplete and $keyboardComplete and $contrastComplete and $formsComplete)
[
(if: $clickMe)
[
(text-colour: "yellow")
[As they worked, the Accessibility Gateway hummed louder, inching open with every success. But the A11y Cats noticed how even small missteps created barriers. “Accessibility isn’t just one fix at a time,” Perci said. “It’s about making the whole journey smooth for everyone.”]
]
(else:)
[As they worked, the Accessibility Gateway hummed louder, inching open with every success. But the A11y Cats noticed how even small missteps created barriers. “Accessibility isn’t just one fix at a time,” Perci said. “It’s about making the whole journey smooth for everyone.”]
]
(if: $captionsComplete and $altTextComplete and $keyboardComplete and $contrastComplete and $formsComplete and not $clickMe) [
There's one last door...[[Click Here]] (set: $clickHere to true)
]
(else-if: $clickHere and $clickThis and $clickMe)[
“Just as a single door without a clear purpose can lead us astray,” Ollie notes, “each of these elements has to be clear and functional to help everyone pass through.”
[[Congratulations! You have unlocked the Final Door...]]
]
(else:)[
You must complete all of the challenges before the Final Door can unlock!
]
<br>
<img src="Media_center_captions_framed.jpg" alt="Perci and Ollie react to a fast-paced video of a robot zooming through a city in the Media Center." style="max-width: 100%; height: auto;">
<br>
Scenario:
As they stepped through, the world around them shimmered and transformed into the Media Center. Screens glowed on every wall, playing a looping video.
“Whoa,” Ollie said, tilting her head. “This video is moving super fast! And what’s with all these big words?”
Perci squinted at the screen. The video showed a robot zooming through a city, beeping loudly while a narrator spoke quickly. “If I can’t keep up, how is anyone supposed to follow along?”
Choice Time: What should Perci and Ollie do together?
[[Add basic captions without including background sounds and keep the video’s pace as it is]]
or
[[Add detailed captions that include background sounds and give viewers control over playback speed]] (set: $captionsComplete to true)
<br>
<img src="FC_captions_basic_framed.jpg" alt="Perci and Ollie react to a fast-paced video with basic captions, missing sound effects and context." style="max-width: 100%; height: auto;">
<br>
Ollie tapped away at the keyboard, adding simple captions to the video. The words popped up on the screen as the robot zoomed by. “There! Now the video has captions!” she said, stepping back proudly.
But Perci tilted her head. “Wait a second… the captions only tell us what the narrator is saying. What about the robot’s beeps and zooms? Those are part of the story too!”
“And the video is still moving so fast,” Ollie admitted, her tail drooping. “Even with captions, it’s hard to keep up. Some kids might miss out on the action.”
The two A11y Cats watched as the video played again. While the captions helped a little, the robot’s sounds and the fast pace left some parts confusing.
“This isn’t quite right,” Ollie said, frowning. “We need to [[Add detailed captions that include background sounds and give viewers control over playback speed]]"
<br>
<img src="FC_captions_detailed_framed.jpg" alt="A cat in headphones captions a robot racing video with sounds like [beep beep] and [explosion]." style="max-width: 100%; height: auto;">
<br>
Exactly right! You’ve made a wise move!
Perci said. “We need captions—stat!”
“Good idea,” Ollie said, pulling out her trusty timing tool. “But captions aren’t just words on the screen. They need to match the sound perfectly!”
“And we can’t forget the robot’s beeps and all these cool background noises,” Perci added, her whiskers twitching. “If we leave those out, some kids might miss half the fun!”
Ollie nodded. “Right! Captions need to tell the whole story, not just the talking parts.”
The two A11y Cats got to work, Perci typing captions to explain the robot’s beeps and whooshes while Ollie adjusted the timing so the words appeared exactly when the sounds happened.
“Teamwork makes captions purr-fect!” Perci said, high-pawing Ollie as the video replayed with clear, accurate captions.
In the background, the glowing door pulsed brightly, signaling their success. “One challenge down,” Ollie said, grinning. “Let’s go, team!”
[[The Final Challenges]]
<br>
<img src="FC_Virtual_art_gallery_framed.jpg" alt=" A glowing art gallery with abstract and animated art; Perci and Una refine vivid descriptions." style="max-width: 100%; height: auto;">
<br>
Perci and Una strolled into the Virtual Art Gallery, their eyes widening as new images popped onto the glowing walls. The gallery sparkled with color, displaying everything from swirling abstract shapes to animated scenes that seemed to dance and change before their eyes.
“Whoa!” Perci said, tilting her head at a painting full of bright, looping spirals. “This one’s wild! But… what even is it? A tornado? A candy cane? A super twisty slide?”
Una chuckled, his tail flicking thoughtfully. “It could be all those things, or none of them! But if we don’t describe it properly, how will the other kids know what they’re looking at?”
Perci squinted at an animated scene where a glowing dragon zipped through a starry sky. “And this one? It’s cool, but what’s it about? If we only say ‘dragon flying,’ they’ll miss the part about the stars twinkling and the moon changing colors!”
Una grabbed his glowing notepad. “We need descriptions that explain what the art looks like and what it feels like! What story is it telling? What’s it supposed to mean?”
Choice Time: What should Perci and Una do?
[[Focus only on describing the colors and shapes they see]]
or
[[Include descriptions that capture the feeling, movement, and mood of the art]] (set: $altTextComplete to true)
<br>
<img src="FC_Virtual_art_gallery_only_shapes_framed.jpg" alt="Perci and Una view abstract art of blue and red swirls with a yellow circle, noting only shapes." style="max-width: 100%; height: auto;">
<br>
Perci stared at the swirling, colorful shapes on the glowing gallery wall. She jotted down some notes. “Okay, this one has lots of blue and red swirls and a big yellow circle in the corner. Done!”
Una tilted his head, frowning slightly. “Hmm… but what’s it about? The swirls look like they’re moving, like a storm spinning around the sun! And the colors—don’t they feel exciting and a little wild?”
Perci’s whiskers drooped. “I guess just saying the colors and shapes isn’t enough. How will the other kids know what it feels like to look at this art?”
“Exactly,” Una said, nodding. “Art isn’t just about what you see—it’s about the story it tells and the feelings it creates!”
Perci sighed. “If we [[Include descriptions that capture the feeling, movement, and mood of the art]] this will create a better experience for everyone!"<br>
<img src="FC_Virtual_art_gallery_emotions.jpg" alt="Perci and Una in a glowing gallery, highlighting the need for art descriptions with emotion and movement." style="max-width: 100%; height: auto;">
<br>
Excellent decision! You nailed it.
Perci and Una strolled through the glowing Virtual Art Gallery, their eyes lighting up as new images appeared on the walls. Swirling spirals, glowing dragons, and colorful animations filled the space with energy.
“This one’s wild!” Perci exclaimed, pointing to a painting of twisting spirals. “It’s like candy canes caught in a windstorm. But how do we make sure kids who can’t see it can imagine all the fun?”
Una nodded, studying a glowing dragon zipping across a starry sky. “Descriptions should feel like the art—fun, clear, and full of story. But they also need to be easy for everyone to understand.”
Perci grabbed her glowing notepad. “I’ll describe how the art moves and feels, like how the dragon’s shimmering scales light up the night sky.”
“And I’ll make sure the descriptions are simple and clear,” Una added, his tail flicking. “We want every kid, no matter how they read or imagine, to enjoy the story the art tells.”
The two cats worked side by side, blending creativity and clarity. Perci described how the candy-cane spirals twisted like a playful breeze, while Una made sure the words were easy to follow. They checked every detail to ensure every student could picture the swirling shapes and feel the dragon’s magic.
When they finished, the gallery seemed to glow brighter, as if the art itself was smiling. “We did it!” Perci cheered, giving Una a high-paw. “Now everyone can enjoy the art, just like we do!”
“And maybe imagine their own adventures along the way,” Una said with a grin.
[[The Final Challenges]]
<br>
<img src="FC_Game_zone_keyboard_framed.jpg" alt=" vibrant Game Zone with glowing platforms, portals, and treasure; Ollie and Raffi work excitedly." style="max-width: 100%; height: auto;">
<br>
Ollie bounced excitedly into the Game Zone, her eyes sparkling as she spotted glowing platforms and swirling portals scattered across the digital landscape. Raffi stood nearby, tapping his glowing keyboard.
“Check it out!” Raffi said, his tail flicking. “This game has secret levels and cool features—but they’re hidden behind tricky keyboard combos. Look at this one!” He pressed a series of keys, and a floating treasure chest appeared.
“Whoa!” Ollie said, her whiskers twitching with excitement. “But wait… how’s everyone supposed to find these secrets if they don’t know the combos? What if they’re using a different kind of keyboard?”
Raffi nodded thoughtfully. “Good point. If we don’t explain how to access these hidden areas, some kids might get left out.”
Choice Time: What should Ollie and Raffi do?
[[List only the most common keyboard shortcuts, leaving out the more complex ones]]
or
[[Map out every keyboard shortcut, including those needed to reach hidden areas]](set: $keyboardComplete to true)
<br>
<img src="FC_Keyboard_only_common_framed.jpg" alt="Dimly lit Game Zone with "Keyboard" guide; Ollie and Raffi observe players stuck at Level 2." style="max-width: 100%; height: auto;">
<br>
Ollie and Raffi stood in the Game Zone, staring at the glowing guide they had just finished creating. The map floated in the air, showing the basic keyboard shortcuts players would need to start their adventure.
“Well, it’s a start,” Ollie said, her tail swishing. “But something feels… off.”
Raffi nodded, his ears flicking. “Look! That kid is stuck on Level 2. They’re pressing keys, but the game isn’t letting them move forward.”
“Uh-oh,” Ollie muttered, tilting her head. “It’s like they’re trapped in a loop! They can’t leave this area because there’s no shortcut to get out.”
“And look at that one,” Raffi added, pointing at another hologram of a player spinning in circles. “The shortcut they need is hidden, and they have no way to find it.”
Ollie’s whiskers drooped. “We need to [[Map out every keyboard shortcut, including those needed to reach hidden areas]] "<br>
<img src="FC_Keyboard_map_all_framed.jpg" alt="A vibrant Game Zone with glowing platforms and portals; Ollie and Raffi refine the keyboard guide." style="max-width: 100%; height: auto;">
<br>
Spot on! That was the perfect choice!
Ollie bounced into the Game Zone, her eyes widening at the glowing platforms, swirling portals, and treasure chests floating in the air. Raffi stood nearby, tapping furiously on a glowing keyboard.
“Whoa, this is amazing!” Ollie said, her tail flicking with excitement. “But how do you get to all those secret levels?”
“It’s tricky,” Raffi replied, his ears twitching. “There are keyboard shortcuts for everything, but they’re super hard to figure out. If players don’t know the combos, they’ll miss out on all the fun.”
Ollie tilted her head, her whiskers twitching. “What if they don’t even have a fancy keyboard? Or use a tool that reads the game for them? We need a guide!”
Grabbing her glowing notepad, Ollie started scribbling. “This will show every player exactly what to press—step by step.”
“And I’ll test each shortcut,” Raffi said, his tail curling into a question mark. “We need to make sure it works on every device, whether it’s a laptop, a tablet, or even a screen reader.”
The two cats got to work. Ollie carefully mapped out every keyboard shortcut, making sure each action could be done smoothly with just the keyboard. Raffi tested everything, checking compatibility with different tools and devices.
As they worked, the Game Zone lit up brighter and brighter. A glowing map of the game’s hidden features appeared, showing all the secret portals and treasure chests.
“Now everyone can join the fun!” Ollie said with a purr.
“Teamwork strikes again!” Raffi added, giving her a high-paw as the glowing “Keyboard” door in the background pulsed brightly, signaling their success.
[[The Final Challenges]]
<br>
<img src="FC_Contrast_framed.jpg" alt=" glowing book on a golden pedestal in a shadowy library; the magical text is hard to read." style="max-width: 100%; height: auto;">
<br>
The A11y Cats crept into the shadowy Library, where books floated and sparkled in the air. At the center of the room was a glowing, mysterious book perched on a golden pedestal. Its magical letters shimmered and shifted, but the colors made the words nearly impossible to read.
“Whoa, check this out!” Perci whispered, her eyes wide. “This book looks like it’s filled with secret spells!”
“But… can you even read it?” Ollie asked, squinting at the page. “The glow is cool, but the words blend into the background like invisible ink!”
Una stepped forward, her tail flicking with determination. “We’ve got to fix this! The glow is magical, but the colors need to be clear enough for everyone to read.”
Choice Time: What should the A11y Cats do?
[[Brighten the glow, even if it makes the text harder to read]]
or
[[Adjust the shades to improve contrast, making the text stand out without losing the magical glow]] (set: $contrastComplete to true)
<br>
<img src="FC_Contrast_brightened_framed.jpg" alt=" A magical library with a glowing book; its hard-to-read text blends into the background." style="max-width: 100%; height: auto;">
<br>
The glowing letters shimmered a little brighter, but the words still blended into the background like a hidden puzzle. Kids tilted their heads and squinted at the page, trying their best to read, but the effort left them frustrated.
“This isn’t working,” Perci said, her whiskers drooping. “The glow is nice, but if the words are hard to see, it’s not magical—it’s just tricky!”
There’s a better way to fix this. Let's [[Adjust the shades to improve contrast, making the text stand out without losing the magical glow]] <br>
<img src="FC-Contrast_all_visible_framed.jpg" alt="A glowing book in a magical library; A11y Cats adjust text for readability while keeping the magic." style="max-width: 100%; height: auto;">
<br>
Exactly right! You’ve made a wise move!
The A11y Cats entered the shadowy Library, where floating books shimmered in midair, their pages glowing like stardust. At the center of the room stood a mysterious book on a golden pedestal, its letters swirling with magical light. But as enchanting as it looked, the words were nearly impossible to read.
“Whoa, this book is amazing!” Perci exclaimed, her tail swishing. “But how is anyone supposed to read it?”
“The glow is cool, but the colors make the words blend into the background,” Ollie said, squinting. “It’s like trying to read invisible ink!”
Una stepped forward, tapping her paw thoughtfully. “We need to make the text stand out while keeping the magic intact.”
“Right,” Raffi agreed, holding up his glowing tools. “Let’s make sure the colors work for everyone, no matter how they’re reading it.”
The team got to work. Perci carefully adjusted the colors, making the glowing text brighter and more distinct against the background. “It’s getting better,” she said, “but we need more than just good contrast.”
Ollie tested how the text looked when navigating with a keyboard. “The colors have to work across all focus states too,” he explained, ensuring readability for everyone.
Una added symbols and text cues to the glowing words. “We can’t rely on color alone to show important details,” she said, adding small icons for extra clarity.
Finally, Raffi checked the design on different devices and with screen readers. “It needs to work everywhere—tablets, laptops, even under high-contrast settings,” he said.
After their adjustments, the book glowed brighter than ever, its enchanting appearance fully intact but now readable to everyone.
“We did it!” Perci cheered, giving Una a high-paw. “Now everyone can enjoy the story!”
“And they won’t miss a single magical detail,” Raffi added with a grin. The A11y Cats admired their work, knowing they’d made the magical book accessible to all.
[[The Final Challenges]]
<br>
<img src="FC_Digital_classroom_forms_framed.jpg" alt="Una and Raffi analyze a glowing form in a futuristic classroom with colorful floating holograms." style="max-width: 100%; height: auto;">
<br>
Una and Raffi bounded into the Digital Classroom, where a bright new form hovered in the air, sparkling with colorful lights.
“Whoa, look at this one!” Raffi exclaimed, swishing his tail. “It’s asking for, like, everything! Name, address, favorite snack, and even… ‘Parent’s Email’? What’s that about?”
Una tilted his head, his whiskers wiggling. “This form is so busy! And look, some parts don’t even explain what they want.”
Raffi squinted at a glowing box that simply said, “Optional.” “Optional what? What do I write here?” he muttered.
Una stepped forward, his paws on his hips. “Forms are supposed to guide you, not confuse you! And asking for all this personal stuff? That’s not cool unless we know why it’s needed and how it’ll be used.”
Choice Time: What should Una and Raffi do?
[[Skip adding privacy reminders to speed up the process, leaving the students to guess about sharing information]]
or
[[Include privacy reminders and clear instructions for each section]] (set: $formsComplete to true)
<br>
<img src="FC_Digital_classroom_no_privacy_framed.jpg" alt="Una and Raffi view a messy form with vague fields as students appear confused and hesitant." style="max-width: 100%; height: auto;">
<br>
Una and Raffi worked quickly to finish the form. Without adding any privacy reminders, the glowing form hovered in the air, ready for students to use.
“Well, it’s done,” Raffi said, stepping back. “But… something doesn’t feel right.”
Una nodded, his whiskers twitching. “Yeah. Look at this kid.” He pointed to a hologram of a student staring at the form. “They’re pausing on the ‘Parent’s Email’ box. Do they even know if it’s safe to share that?”
Another student hesitated, hovering over the ‘Optional’ box. “What do I write here?” they muttered to themselves.
The room grew quiet as more students seemed confused or unsure about what to do.
Una sighed. “A form isn’t just about speed—it’s about making sure everyone knows what’s okay to share. Privacy matters.”
Raffi nodded, his tail drooping. “We should [[Include privacy reminders and clear instructions for each section]] "<br>
<img src="FC_Digital_classroom_privacy_framed.jpg" alt="Una and Raffi finalize a clear, accessible form with privacy reminders as students smile confidently." style="max-width: 100%; height: auto;">
<br>
“Great choice!” Una said with a confident grin. “This form needs some serious help, and you spotted exactly what’s wrong!”
Raffi flicked his tail as he inspected the form. “No wonder kids are confused. It’s asking for things like a parent’s email and favorite snack, but it doesn’t even say why! Plus, without clear labels, how’s anyone supposed to know where to start?”
Una nodded. “And don’t forget about kids using screen readers or older devices. If we don’t design forms the right way, some kids might get completely left out.”
With determination, the A11y Cats got to work. Una started by adding clear, simple instructions to each section: “This box will say, ‘Type your name here,’ and this one will explain why it’s needed.”
Meanwhile, Raffi used his glowing tools to ensure the form worked smoothly on all devices and tools. “Forms aren’t just about looks,” he explained. “We need proper tags and descriptions so every kid can use them, whether they’re on a tablet, a computer, or a screen reader.”
They even added a privacy-friendly reminder at the top: “Only share what’s needed to complete the form!”
Finally, with the form polished and glowing, Raffi added a cheerful confirmation message: “You’re all set! Great job!”
The form now sparkled, ready to help every student. The “Forms” door in the background pulsed brightly, signaling their success.
“Teamwork really does make the purr-fect form!” Una said, high-pawing Raffi.
“Thanks to you, this form is ready for everyone!” Raffi added with a grin as they bounded off to their next adventure.
[[The Final Challenges]]
<br>
<img src="Conclusion_framed.jpg" alt="A glowing plaza with the A11y Cats and students, surrounded by holograms of accessible tech." style="max-width: 100%; height: auto;">
<br>
As the A11y Cats wrapped up their mission, a magical glow spread across the Digital School Plaza. The students looked around, realizing something amazing: all the things they learned about accessibility could help the people they care about.
One student thought of their grandparent, who struggles to read tiny text on their tablet. “What if Grandpa couldn’t read an important message about his medicine because the letters were too small or hard to see? That would be so scary!” they said.
Another remembered when their best friend broke their hand last summer. “He couldn’t even play games or do homework because using the computer was so tricky! What if websites were made so he could use his other hand or even his voice to get things done? That would have been awesome!”
The A11y Cats smiled. Perci stepped forward. “That’s the magic of accessibility! It’s not just about helping one person—it’s about making the world better for everyone.”
Ollie added, “When we make websites easier to use, we’re helping people we love—like our grandparents, our friends, or maybe even for someone we haven’t met yet.”
Una nodded. “Think about it! You can help someone get their work done, enjoy their favorite games, or just read a story they love.”
“And that’s where you come in!” Raffi said with a proud flick of his tail. “Next time you see a website with tiny text, tricky buttons, or anything hard to use, remember what you’ve learned. You can be the hero who makes it better!”
The A11y Cats all looked at the students, their eyes sparkling. “You have the power to make the world kinder and fairer for everyone,” Perci said. “And that’s something to be proud of.”
[[Epilogue: A Letter to the Reader]]
[[Fabulous Facts!]]
[[Dedication]] Dear Super Reader,
Wow, what an adventure! The A11y Cats couldn’t have done it without YOU. Your quick thinking and awesome ideas helped us tackle every tricky challenge!
To say thank you, we’re making you an honorary A11y Cat Champion! Here’s your very own badge—wear it proudly, because you’ve earned it.
<br>
<img src="Honorary_badge_framed.jpg" alt="A colorful celebration scene with the A11y Cats, sparkles, balloons, and an honorary A11y Cat Champion badge." style="max-width: 50%; height: auto;">
<br>
Being an A11y Cat Champion means you have superpowers to help make the digital world better for everyone. Accessibility is all about making sure no one gets left out—whether it’s a friend, a family member, or someone you haven’t even met yet.
With your new skills, you can:
Spot things that need fixing and make them better.
Create cool stuff that works for everyone.
Spread kindness and inclusivity wherever you go.
So, keep exploring, keep creating, and keep being amazing. The world needs heroes like YOU to make it welcoming for everyone. The A11y Cats are so proud to have you on the team!
You’ve got this, Champion!
Paws and high-fives,
The A11y Cats
~Perci, Ollie, Una, and Raffi
<br>
<img src="Four_paw_prints_team_high-five_style.jpg" alt="Four colorful paw prints in yellow, blue, green, and red, arranged like a high-five team." style="max-width: 10%; height: auto;">
<br>
[[Fabulous Facts!]]
[[References]]
[[Dedication]] Amazing Inventions That Help Everyone!
Imagine discovering a tool or gadget that doesn’t just solve one problem—it makes life better for everyone! Did you know that some things we use every day started as solutions for people with disabilities? Let’s explore a few of these super cool inventions and see how they make life easier for all of us!
[[Non-Digital Marvels]]
[[Digital Wonders]]
<style>
.inline-container {
display: flex; /* Use flexbox for inline alignment */
align-items: center; /* Align items vertically */
}
.inline-container img {
margin-right: 30px; /* Add space between image and text */
}
.inline-container p {
margin-right: 30px;
margin: 0; /* Remove default margin for paragraph */
}
</style>
Non-Digital Marvels:
<div class="inline-container">
<p>Curb Cuts:
Ever seen those little ramps at the edge of sidewalks? They were invented to help wheelchair users cross the street. But now, they’re a lifesaver for parents with strollers, kids on bikes, and even travelers with suitcases. So handy!</p>
<img src="Curb_Cuts_framed.jpg" alt="City street with glowing curb cuts that can be used by wheelchair users, parents, and travelers." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Velcro_sneaker_framed.jpg" alt="." style="max-width: 30%; height: auto;">
<p>Velcro:
You know that sticky stuff on your shoes or backpacks? Velcro was invented to help people who had trouble tying things. Now it’s used everywhere, from clothes to outer space!</p>
</div>
<div class="inline-container">
<p>OXO Good Grips Kitchen Tools:
These kitchen gadgets have big, comfy handles that were made to help people with arthritis cook. Now, they’re so easy to use, everyone loves them!</p>
<img src="OXO_Toolsset_framed.jpg" alt="A row of ergonomic kitchen peelers with comfortable handles designed for easy grip" style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Electric_Toothbrush_framed.jpg" alt="A smiling child wearing a superhero costume holds up a blue electric toothbrush proudly." style="max-width: 30%; height: auto;">
<p>Electric Toothbrush:
Brushing teeth can be tricky for people with arthritis or limited movement, so the electric toothbrush was invented. And now? It’s become a super gadget to keep everyone’s teeth squeaky clean!</p>
</div>
<div class="inline-container">
<p>Tactile Paving (Braille Blocks):
Look down! Those bumpy tiles on sidewalks help people who are blind or visually impaired find their way. And guess what? They make cities safer for everyone!</p>
<img src="Tactile_blocks_framed.jpg" alt="A sidewalk curb cut with bright yellow tactile paving for accessibility and safety." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Standing_desk_framed.jpg" alt="An adjustable standing desk in a modern office setup with dual monitors and a keyboard." style="max-width: 30%; height: auto;">
<p>Adjustable Furniture:
Standing desks? Ergonomic chairs? They started as a way to help people with mobility challenges, but now they’re all the rage in offices and homes to keep everyone comfy and healthy.</p>
</div>
[[Digital Wonders]]
[[References]] <style>
.inline-container {
display: flex; /* Use flexbox for inline alignment */
align-items: center; /* Align items vertically */
}
.inline-container img {
margin-right: 30px; /* Add space between image and text */
}
.inline-container p {
margin-right: 30px;
margin: 0; /* Remove default margin for paragraph */
}
</style>
Digital Wonders:
<div class="inline-container">
<p>Typewriters and Keyboards:
A long time ago, someone made the first typewriter so a blind woman could write letters. Pretty cool, right? Now, that invention has turned into the keyboards we use to send texts, play games, and type stories!</p>
<img src="Typewriter_keyboard_framed.jpg" alt="A black-and-white image of a man seated at a table with the first typewriter he invented, Pellegrino Turri." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Speech_to_text_framed.jpg" alt="A smart speaker with a glowing microphone icon and a speech bubble showing various app icons." style="max-width: 30%; height: auto;">
<p>Speech-to-Text and Voice Assistants:
Ever talked to Siri or Alexa? These handy helpers started as tools for people who couldn’t type, but now they tell jokes, answer your questions, and even help you set reminders. They’re like tiny superheroes in your pocket!
</p>
</div>
<div class="inline-container">
<p>Audiobooks: Imagine a world where you can “read” without even looking at a page! Audiobooks were first made for blind readers, but now they’re perfect for long car rides, cozy bedtime stories, or just chilling with your favorite tale.</p>
<img src="Audio_books_framed.jpg" alt="Stack of colorful books wearing headphones with audio controls and a microphone icon overlay." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Closed_cpationing_framed.jpg" alt="TV displaying a storm scene with closed captions and a speech bubble showing 'CC' in bold letters." style="max-width: 30%; height: auto;">
<p>Closed Captions on TV: You know those words that pop up at the bottom of the screen on TV? They were created so people who are deaf could enjoy shows and movies. Now, they’re great for everyone—whether you’re in a noisy room or learning a new language!</p>
</div>
<div class="inline-container">
<p>Bionic Prosthetics and Exoskeletons:
These gadgets are straight out of a superhero story! They were invented to help people with mobility challenges, but now they’re being used for awesome stuff—like helping workers lift super-heavy things or exploring new places.</p>
<img src="Bionic_exoskeleton_framed.jpg" alt="Worker wearing a futuristic exoskeleton suit, lifting a heavy object in an industrial setting." style="max-width: 30%; height: auto;">
</div>
[[Non-Digital Marvels]]
[[References]] References:
https://webaim.org/projects/million/
https://www.w3.org/WAI/standards-guidelines/wcag/
https://www.w3.org/TR/WCAG22/
https://wcag-2-point-2-explorer.notion.site/6d8f6cb4081349e99e7bcd85770cca00?v=4f93e67af3c6459593354a480a5db354
https://www.andrewhick.com/accessibility/wcag-map/
https://andrewhick.com/accessibility/wcag-map-aaa/
https://uxdesign.cc/ux-accessibility-how-to-start-designing-for-all-4d3c4ce9ea52
https://uxdesign.cc/explaining-wcag-principles-perceivable-42eb87cc5f6e
https://uxdesign.cc/explaining-wcag-principles-operable-a771b3c79d29
https://uxdesign.cc/explaining-wcag-principles-understandable-robust-7c89193e002a
https://www.w3.org/WAI/people-use-web/abilities-barriers/
https://science.howstuffworks.com/innovation/everyday-innovations/items-invented-people-with-disabilities.htm
https://share.america.gov/thank-people-with-disabilities-for-these-inventions/
https://smartdesignworldwide.com/projects/oxo-partnership/
https://whocandowhat.com/who-invented-the-electric-toothbrush/
https://www.rnib.org.uk/news/rnib-welcomes-network-rail-commitment-to-install-tactile-paving/
https://www.rnib.org.uk/news/campaign-update-funding-plans-for-railway-safety/
https://www.healthcarefacilitiestoday.com/posts/Four-ways-accommodating-furniture-is-making-society-more-inclusive--17507
https://www.historynewsnetwork.org/article/how-deaf-advocates-won-the-battle-for-closed-capti
https://www.re-thinkingthefuture.com/architectural-community/a6705-10-disability-products-that-can-help-people-overcome-daily-tasks/
https://news.un.org/en/story/2021/03/1088032
[[Fabulous Facts!]]
[[Glossary of Terms]] The Final Door
<br>
<img src="FinalDoor_Digital_auditorium_framed.jpg" alt="A magical auditorium with glowing rows of students, a screen says, Accessibility isn’t just one thing—it’s about making everything work together" style="max-width: 100%; height: auto;">
<br>
The A11y Cats returned to the plaza, their tails swishing with excitement. All the glowing symbols floated into place on the giant Accessibility Gateway, which shimmered and pulsed with energy. Slowly, the gateway creaked open, revealing a glowing path inside.
“This is it!” Perci said, her eyes sparkling. “All our hard work and teamwork have brought us here!”
The A11y Cats stepped through and found themselves in a grand Digital Auditorium. Rows of students filled the space, and above them, a huge screen flashed a message in bold, glowing letters:
"Accessibility isn’t just one thing—it’s about making everything work together!"
Ollie stepped forward, her voice full of excitement. “Hey, everyone! Guess what? You can be accessibility heroes too! Here’s how you can help make the digital world better for everyone:"
<span style="color: orange;">
1. Look Around:
Notice things that might be hard to see, hear, or use on websites or apps. If something seems tricky, tell a teacher or a grown-up—they can help fix it!
2. Add Details:
When you share pictures or videos, describe them or add captions. Imagine you’re explaining it to a friend who can’t see or hear it.
3. Try the Keyboard Challenge:
Navigate a website using only the keyboard—no mouse allowed! If something doesn’t work, you’ve found a way to make it better.
4. Share the Adventure:
Teach your friends, teachers, or family what you’ve learned about accessibility. Little tips can make a big difference!
5. Start an Accessibility Team:
Get together with friends to test websites, share ideas, and help make the digital world more welcoming for everyone.
</span>
Una smiled at the cheering crowd. “Every small step you take makes the world more inclusive. You’re part of the team now!”
Raffi nodded. “And remember—accessibility isn’t just a job; it’s an adventure!”
As the students cheered and the auditorium glowed brighter, the A11y Cats knew their mission was a success. The digital school had become a place where everyone could play, learn, and explore together—and now, the students were ready to carry the mission forward.
[[Conclusion: Making the World Better for Everyone]]Dedication:
<br>
<img src="Dedication_framed.jpg" alt="Baby Roberta cuddled between Mom and Dad on a cozy couch, surrounded by love and warm smiles." style="max-width: 50%; height: auto;">
<br>
To my Mom and Dad, who have always been my greatest teachers and cheerleaders. You showed me the magic of being curious, the power of working hard, and how kindness makes the world brighter.
Mom, you taught me to find joy in little things, like the smell of fresh bread, sharing jokes at dinner, or helping others just because it feels good. You’re my shining star, always lighting the way.
Dad, you showed me that even when things get tricky, rolling up your sleeves and trying your best can turn problems into adventures. You taught me that success isn’t about stuff—it’s about doing good and helping others.
Everything I’ve learned from you—about being kind, brave, and determined—is part of this book and every adventure I take. Thank you for filling my heart with courage and my mind with big dreams. This one’s for you!
Thank you BOTH beyond measure!
With Love and Gratitude,
~Roberta, Bobbi, Bookie, and Boo.
[[References]] <style>
.inline-container {
display: flex; /* Use flexbox for inline alignment */
align-items: center; /* Align items vertically */
}
.inline-container img {
margin-right: 15px; /* Add space between image and text */
}
.inline-container p {
margin: 0; /* Remove default margin for paragraph */
}
</style>
Meet the A11y Cats: The Meaning Behind their Names
<br>
The A11y Cats are a very special group of friends, each with a unique talent that helps make the digital world easier for everyone. Want to know a secret? Their names aren’t just fun—they actually tell you a little about what they do! Each cat is named after one of the big ideas behind making things accessible: Perci, Ollie, Una, and Raffi.
<br>
<div class="inline-container">
<img src="Perci_framed.jpg" alt="A friendly cartoon cat with bright eyes and a soft glow in the background." style="max-width: 30%; height: auto;">
<p>Perci is a super-smart cat who helps everyone see and hear things online. She adds words to pictures, makes sure videos have subtitles, and checks colors so they’re easy to read. Perci’s name comes from “Perceivable”—she makes sure everyone can enjoy what’s online, no matter how they see the world!</p>
</div>
<br>
<div class="inline-container">
<img src="Ollie_framed.jpg" alt="A sleek cartoon cat with curious eyes, wearing a turtleneck with a soft-lit background." style="max-width: 30%; height: auto;">
<p>Ollie is a speedy, clever cat who makes websites easy to use. Whether you’re clicking buttons, using a keyboard, or even talking to your device, Ollie makes sure everything works smoothly. Her name comes from “Operable,” which means you can use websites your way!</p>
</div>
<br>
<div class="inline-container">
<img src="Una_framed.jpg" alt="A wise cartoon cat with kind eyes and a glowing, starry background." style="max-width: 30%; height: auto;">
<p>Una is a kind and wise cat who loves helping things make sense. He writes clear instructions, keeps words simple, and makes sure every button does what you expect. Una’s name comes from “Understandable” because he loves making websites as easy as reading your favorite story!</p>
</div>
<br>
<div class="inline-container">
<img src="Raffi_framed.jpg" alt="A clever cartoon cat with green eyes, a soft glow, and a stylish tech-savvy appearance." style="max-width: 30%; height: auto;">
<p>Raffi is a brave and adventurous cat who makes sure websites work no matter what! Old computer, new tablet—Raffi’s got you covered. His name comes from “Robust,” which means strong and flexible, just like him. Raffi makes sure the digital world works for everyone!</p>
</div>
<br><br>
The A11y Cats follow a special rulebook called the Web Content Accessibility Guidelines, or WCAG (say it like “Wuh-kag”!). It’s their trusty guide to make sure everyone can use the internet, no matter how they get around. With their awesome skills, the A11y Cats make the digital world a fun and friendly place for everyone!
[[Why Focus on These Principles?]] <style>
.inline-container {
display: flex; /* Use flexbox for inline alignment */
align-items: center; /* Align items vertically */
}
.inline-container img {
margin-right: 30px; /* Add space between image and text */
}
.inline-container p {
margin-right: 30px;
margin: 0; /* Remove default margin for paragraph */
}
</style>
Why Focus on These Principles?
<br>
<img src="inclusive_scene_framed.jpg" alt="An inclusive park scene with wheelchair users, stroller users, bikers, and people interacting." style="max-width: 100%; height: auto;">
The A11y Cats work hard to make the internet fun and easy for everyone to use.
But why do they follow the P.O.U.R. principles—Perceivable, Operable, Understandable, and Robust? It’s because these ideas help solve big online problems, like when a video doesn’t have captions or a button is hard to click. And guess what? Fixing these problems isn’t as tricky as it sounds!
Every year, a group called WebAIM out of Utah State University looks at 1 million websites and finds the same simple mistakes over and over—like forgetting to add descriptions to images! With a little know-how (and some help from the A11y Cats), these problems can be fixed quickly to make the digital world better for everyone.
Let's take a closer look...
<div class="inline-container">
<p>Perci works hard to make sure everyone can see and read things online. One big problem she fixes is when websites use colors that make it hard to read the words—like yellow letters on a white background. That’s like trying to read chalk on a sunny sidewalk—super tricky, right? WebAIM found that 86 out of every 100 home pages have this problem! But don’t worry—Perci knows how to fix it by picking better color combinations, making everything easier to read. It’s like magic, but with colors!</p>
<img src="Contrast_framed.jpg" alt="Comparison of yellow text on white (low contrast) and yellow text on black (high contrast) backgrounds." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Keyboard - TrapandNavigation_framed.jpg" alt="A website map with pathways, a central red padlock symbolizing a trap, and branching icons." style="max-width: 30%; height: auto;">
<p>Ollie makes sure websites are easy to use for everyone, even if they don’t use a mouse. Some people use a keyboard to move around a website, but sometimes they get stuck—like hitting a dead end in a maze! WebAIM found that this happens on 60 out of every 100 home pages. That’s a big problem for people who can’t use a mouse! Luckily, Ollie knows how to fix this by teaching websites how to play nice with keyboards, so no one gets trapped. It’s like unlocking a secret shortcut for everyone!</p>
</div>
<div class="inline-container">
<p>Una’s job is to make sure websites are easy to understand. One big problem he fixes is confusing forms—like when a form doesn’t tell you what to type in a box. Imagine being told to “fill this out” but not knowing what “this” is—it’s frustrating, right? WebAIM found that this happens on 54 out of every 100 home pages! But Una knows just what to do: he helps websites add clear labels to forms and buttons, so everyone knows exactly what to do. It’s like adding helpful signs to a treasure map!</p>
<img src="Forms_framed.jpg" alt="A poorly labeled form with a pen nearby, highlighting user confusion and a missing label error." style="max-width: 30%; height: auto;">
</div>
<div class="inline-container">
<img src="Robust_framed.jpg" alt="Raffi helps kids use assistive devices like VR, screen readers, and braille displays in a library." style="max-width: 30%; height: auto;">
<p>Raffi makes sure websites stay strong and work everywhere, even with new tools or old gadgets. WebAIM found that lots of websites have broken code or don’t work well with assistive technologies like screen readers. That’s where Raffi steps in! He helps fix these problems so websites work smoothly on any device and for anyone, no matter how they get online. It’s like making sure everyone can cross a bridge, no matter what vehicle they’re using!</p>
</div>
The A11y Cats focus on the four super-important principles to fix problems that make the web tricky for some people to use. The WebAIM report shows that with just a little learning, these problems can be fixed quickly. And when the web is easier for everyone to use, it’s way more fun for all of us!
So, let’s be like the A11y Cats—learn a little, help a lot, and make the internet a place where everyone can play, explore, and have a great time!
[[Prologue: A Call for HELP!]]
Glossary of Terms
<br>
<img src="A11y_Explanation_framed.jpg" alt="The word 'ACCESSIBILITY' is shortened to 'A11Y,' showing 11 letters replaced with the number 11." style="max-width: 100%; height: auto;">
<br>
A11Y
The abbreviation "A11Y" stands for "Accessibility."
It’s a numeronym, a clever way to shorten a long word while still emphasizing its core meaning!
The number 11 represents the 11 letters between the first letter "A" and the last letter "Y" in the word "Accessibility."
This shorthand is commonly used in the tech community to refer to the principles and practices of making digital products and environments accessible to everyone, including people with disabilities.
It's a clever way to shorten a long word while still emphasizing its core meaning!
In the Accessibility community, A11y is pronounced as "A-eleven-Y", “A-one-one-Y” or more commonly as “Ally.”
They find a button that says "Auto-Captions" on the video player. They press it, and words start to appear on the video. “Look, the captions are back!” says one student, feeling relieved.
But as they watch, they realize that some of the words don’t match what the teacher is saying, and the captions keep missing important phrases. “It’s better than nothing,” says Perci, “but some kids still might not get all the information they need.”
<br>
<img src="Quick_Fix_Captioning_Tool_framed.jpg" alt="A broken captioning tool shows jumbled or missing captions, with A11y Cats and kids looking confused." style="max-width: 100%; height: auto;">
<br>
[[Create their own captions for each video]]
[[Chase the Caption Snatcher to get the original words back]]
<br>
<img src="virtual_art_gallery_basic_template_framed.jpg" alt="Virtual art gallery with glowing frames, puzzled kids, and A11y Cats observing and guiding." style="max-width: 100%; height: auto;">
<br>
The A11y Cats find a cool tool that writes simple descriptions super fast! They try it out, and suddenly the frames say things like, “A colorful sunset” or “A smiling child.”
“It’s faster, and now the kids have something to read,” says Una. But Perci tilts her head and purrs, “Hmm, these descriptions are okay, but they don’t tell the whole story. What makes the art special is missing!”
The kids read the descriptions but still look a little confused. “Why does it just say 'colorful sunset'? What kind of sunset is it?” one kid asks.
“It’s better than nothing,” says Una, “but maybe we can do better.”
What’s next?
[[Add detailed descriptions themselves]]
[[Ignore adding descriptions since it's easier and faster]] <br>
<img src="KeepThingsAsTheyAre.jpg" alt="Magical playground with a closed glowing gate, happy kids inside, and excluded kids outside." style="max-width: 100%; height: auto;">
<br>
The game works great for kids using touchscreens, but some players are left standing at the gate, watching. “It’s like having a playground with a locked door,” Ollie explains. “Only some kids can play, and others are stuck outside. That’s not fair, right?”
Ollie continues, “If we make the game work with keyboards, everyone can play! It’s like opening the gate so no one feels left out. Plus, when all the buttons and controls work smoothly, the game is more fun for everyone!”
The A11y Cats tilt their heads. “What should we do? Leave it as it is, or make sure everyone can join in?”
[[Find the hidden entrance]]
[[Tweak the game’s code for easy access]] <br>
<img src="A_cozy_school_library_scene_no_changes_framed.jpg" alt="Perci explains color contrast to students in a cozy library with a colorful "Book Recommendations" board." style="max-width: 100%; height: auto;">
<br>
The list of book recommendations stays as it is, with faded colors blending into the background. Some students lean in close, trying to read the words, while others wander away, frustrated.
The A11y Cats huddle together, and Perci steps forward, holding the magical paintbrush in her paw. She twirls it dramatically. “You know, fixing colors isn’t just about making things look brighter or fancier,” she begins, her tail flicking. “It’s about making sure the text and background are different enough so everyone can read them—like choosing the right colors for a big, important sign.”
She waves the brush toward the board. “When the colors are too similar, it’s like trying to read a secret message written in invisible ink! Good contrast helps everyone—like people with low vision, color blindness, or even those who just find it tricky to read in bright sunlight or on a tiny screen.”
Una chimes in, “It’s like putting on a play. The text is the star, and the background is the stage. If the stage is too messy or bright, no one can see the star!”
Perci nods. “Exactly! The colors need to work together to make sure the message shines.”
The students nod in understanding, but some still look frustrated. Perci sighs, setting the paintbrush down. “Leaving it like this just won’t do. Let’s try something else.”
[[Use the brush to randomly brighten the text colors]]
[[Adjust the background color to ensure strong contrast with the text]] <br>
<img src="Digital_classroom_hint_text_framed.jpg" alt="Raffi uses a glowing paintbrush to add "hint text" to blank tablet boxes in a digital classroom." style="max-width: 100%; height: auto;">
<br>
Raffi waves the magical paintbrush over the blank boxes, and like magic, words appear inside!
“See? Now the boxes have hints!” Raffi says proudly, pointing at one that now says, “Type your name here.”
The students cheer and start typing. But soon, the cheers turn into confusion.
“Hey, where’d the hint go?” one student asks, looking at their screen. “Now I can’t remember what I’m supposed to type!”
“Oh no!” Raffi groans, scratching his head. “The hint disappears as soon as they start typing. It’s like the clue vanishes in the middle of the mystery!”
Una nods, his tail flicking. “It’s helpful at first, but it’s not the best solution. We need something that works even after someone starts typing.”
The A11y Cats huddle together to come up with a better plan.
“Almost, but not quite,” Una says with a determined grin. “Let’s try again!”
[[Ignore the ghost and leave the labels as they are]]
[[Carefully match each label to the correct field, ensuring clarity for every form entry]] <br>
<img src="Digital_classroom_forms_no_changes_framed.jpg" alt="Students struggle with blank boxes on tablets while the A11y Cats discuss fixing missing labels.." style="max-width: 100%; height: auto;">
<br>
The A11y Cats watch as some students slowly figure out the forms.
“Well, a few of them got it,” Ollie says.
“But what about the others?” Una asks, pointing to a group of kids looking confused and frustrated.
“It’s like a treasure hunt where only some kids get a map,” Una explains, his ears drooping. “A few find the treasure quickly, but the rest are stuck wandering in circles, even though they’re just as excited to play.”
Raffi nods. “If we leave the labels like this, it’s not fair. Some students won’t even know where to start. For kids who can’t see well, have trouble focusing, or use special tools, missing labels make it impossible to fill out the form.”
The A11y Cats huddle together, tails swishing thoughtfully.
“This isn’t the answer,” Una says firmly. “We need to fix those labels so everyone can finish the forms and have fun!”
[[Add placeholder text inside the fields to hint at what goes where]]
[[Carefully match each label to the correct field, ensuring clarity for every form entry]]
<br>
<img src="Click_click_this_framed.jpg" alt="A colorful hallway with glowing doors labeled "Click This," a puzzled cat stands in the center." style="max-width: 100%; height: auto;">
<br>
Imagine you’re walking down a long, twisty hallway filled with colorful, glowing doors. Each one has the same label: “Click This.” Excited, you open the first door, but instead of finding the treasure room you were hoping for, you stumble into a broom closet filled with talking dust bunnies!
“Huh?” you wonder. “This isn’t where I wanted to go!”
[[Click This]](set: $clickThis to true)
<br>
<img src="Click_click_all_three_framed.jpg" alt="A glowing hallway with doors labeled “Click This” and a chaotic room of bouncing jellybeans." style="max-width: 100%; height: auto;">
<br>
You try another door, your tail swishing with hope. But when you step inside—uh-oh! Instead of the treasure room, you’re suddenly surrounded by bouncing jellybeans that won’t stop giggling.
“What is this place?” you grumble, trying to dodge the jellybeans. “I just want to find the right door!”
[[Click Me]](set: $clickMe to true)<br>
<img src="Click_click_me_framed.jpg" alt="A hallway with glowing 'Duck Parade' and 'Treasure Room' doors, lights, ducks, and A11y Cats." style="max-width: 100%; height: auto;">
<br>
“It’s fun at first,” Perci says, pawing at her whiskers, “but after a while, it’s just frustrating.”
Una nods. “It’s like the doors don’t want to help us! What if they just said where they go, like ‘Treasure Room’ or ‘Bubble Bath’? That would make it so much easier!”
“That’s what ‘link purpose’ is all about,” Ollie explains, pointing to the glowing doors. “In the digital world, every link should tell you exactly where it’s going—no guessing games.”
“Like saying, ‘Learn How to Unlock the Treasure Room’ instead of just ‘Click Me,’” Raffi adds, tapping a glowing keyboard. “Clear links are like friendly signs—they make sure everyone can find what they’re looking for.”
The cats work together to rename the doors. One becomes “Treasure Room,” another “Bubble Bath,” and even the rubber duck room gets labeled “Duck Parade.” Now, the hallway feels like a friendly, helpful place to explore.
“Much better!” Perci cheers. “Now nobody gets lost!”
[[The Final Challenges]]